<template>
  <view class="budget-page">
    <scroll-view scroll-y class="budget-content-page" :style="`width: 100%`">
      <u-card
        :show-head="false"
        v-for="item in budgetInfo"
        :key="item.budgetControlId"
      >
        <view slot="body">
          <view class="u-main-color u-f-w-b u-font-xl">
            {{ item.feeTypeLevel1Name }}
            <text v-if="item.feeTypeLevel2Name">
              /{{ item.feeTypeLevel2Name }}
            </text>
            <text v-if="item.feeTypeLevel3Name">
              /{{ item.feeTypeLevel3Name }}
            </text>
          </view>

          <view class="u-m-t-20">{{ item.feeRulesDesc }}</view>
          <view class="u-tips-color u-m-t-10">备注：{{ item.remark }}</view>
        </view>
        <view slot="foot">
          <view class="u-p-30 u-flex u-row-between">
            <view class="u-main-color">预算(元)：</view>
            <view class="u-f-w-b u-main-color">{{
              formatPrice(item.totalAmount)
            }}</view>
          </view>
        </view>
      </u-card>
    </scroll-view>
    <view class="u-flex u-row-between bottom-total">
      <view>合计：</view>
      <view class="u-f-w-b u-font-xl u-main-color">{{
        formatPrice(budgetTotal)
      }}</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getBudgetControlList } from '@/api/modules/finance';
import { formatPrice } from '@/utils/tools';
const props = defineProps<{
  contractId: any;
}>();

const { contractId } = toRefs(props);
const budgetInfo = ref<any>();
const budgetTotal = ref<any>(0);
const getBudgetInfo = async () => {
  let res: any = await getBudgetControlList({
    contractId: contractId.value,
  });
  budgetInfo.value = res;
  budgetTotal.value = 0;
  res.forEach((item: any) => {
    budgetTotal.value += item.totalAmount;
  });
};
console.log(contractId, 'contractId');

getBudgetInfo();
</script>

<style lang="scss">
.budget-page {
  height: 100%;
  .budget-content-page {
    height: calc(100% - 100rpx);
    // overflow: auto;
  }
}
.bottom-total {
  background-color: #fff;
  padding: 20rpx;
  position: relative;
  bottom: -16rpx;
}
</style>
